import React, { useState, useEffect } from 'react';
import { Button, Modal, Table, Form, Input, message } from 'antd';
import axios from 'axios';

const UserCards = ({ userId }) => {
    const [cards, setCards] = useState([]);
    const [visible, setVisible] = useState(false);
    const [currentCard, setCurrentCard] = useState(null);
    const [Show, setShow] = useState(false);

    const fetchCards = async () => {
        try {
            const response = await axios.post('http://localhost:3001/adminGetUserCards', { userId });
            setCards(response.data);
        } catch (error) {
            message.error('Failed to fetch cards');
        }
    };

    const handleEditCard = (card) => {
        setCurrentCard(card);
        setVisible(true);
    };

    const handleSaveCard = async (values) => {
        try {
            await axios.put(`http://localhost:3001/cards/${currentCard.id}`, values);
            message.success('Card updated');
            fetchCards();
            setVisible(false);
        } catch (error) {
            message.error('Failed to update card');
        }
    };
    // 删除卡片
    const handleDeleteCard = async (values) => {
        console.log("vlaues", values)
        try {
            await axios.delete(`http://localhost:3001/cards/${values.id}`);
            message.success('删除成功');
            fetchCards();
        } catch (error) {
            message.error('Failed to update card');
        }
    };

    // useEffect(() => {
    //     fetchCards();
    // }, []);

    const columns = [
        { title: 'Name', dataIndex: 'name', key: 'name' },
        { title: 'Rarity', dataIndex: 'rarity', key: 'rarity' },
        { title: 'Attack', dataIndex: 'attack', key: 'attack' },
        { title: 'Defense', dataIndex: 'defense', key: 'defense' },
        { title: 'Health', dataIndex: 'health', key: 'health' },
        {
            title: 'Actions',
            render: (text, record) => (
                <div>
                    <span>
                        <Button onClick={() => handleEditCard(record)}>编辑卡片</Button>
                    </span>
                    <span>
                        <Button onClick={() => handleDeleteCard(record)}>删除卡片</Button>
                    </span>
                </div>
            ),
        },
    ];

    return (
        <div>
            <Button type="primary" onClick={() => {
                fetchCards()
                setShow(!Show)
            }}>View Cards</Button>

            {Show && (
                <div>
                    <Table columns={columns} dataSource={cards} rowKey="id" />
                    <Modal
                        title="Edit Card"
                        visible={visible}
                        onCancel={() => setVisible(false)}
                        footer={null}
                    >
                        <Form onFinish={handleSaveCard} initialValues={currentCard}>
                            <Form.Item name="name" rules={[{ required: true, message: 'Please input name!' }]}>
                                <Input placeholder="Name" />
                            </Form.Item>
                            <Form.Item name="rarity" rules={[{ required: true, message: 'Please input rarity!' }]}>
                                <Input placeholder="Rarity" />
                            </Form.Item>
                            <Form.Item name="attack" rules={[{ required: true, message: 'Please input attack!' }]}>
                                <Input placeholder="Attack" />
                            </Form.Item>
                            <Form.Item name="defense" rules={[{ required: true, message: 'Please input defense!' }]}>
                                <Input placeholder="Defense" />
                            </Form.Item>
                            <Form.Item name="health" rules={[{ required: true, message: 'Please input health!' }]}>
                                <Input placeholder="Health" />
                            </Form.Item>
                            <Form.Item>
                                <Button type="primary" htmlType="submit">
                                    Save
                                </Button>
                            </Form.Item>
                        </Form>
                    </Modal>
                </div>
            )}

        </div>
    );
};

export default UserCards;
